<template>
  <!--  通过ref获取html元素 宽高必须设置 -->
  <div ref="chartDom" style="width: 60vw; height: 80vh"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

import chibi from "../assets/map/赤壁市边界_421281.json";
import chibiArea from "../assets/map/车埠镇边界_34049.json";

//通过inject使用echarts
const echarts = inject("echarts");
//通过ref获取html元素
const chartDom = ref();
onMounted(() => {
  // 渲染echarts的父元素
  var chartEl = chartDom.value;

  //  light dark
  var userEc = echarts.init(chartEl, "dark");
  echarts.registerMap('chibi', chibi, {});

  // 指定图表的配置项和数据
  var option = {
    backgroundColor: "#F3F3F3",
    zoom: 2,
    title: {
      text: "赤壁市 · 智慧分析",
      top: 25,
      left: "center",
      textStyle: {
        fontSize: 25,
        fontWeight: 650,
        color: "#ff0000",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: function (val) {
        // console.log(val);
        return val.name + ":<br>零售店: " + val.value + "家";
      },
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        dataView: {},
        restore: {},
        saveAsImage: {},
      },
    },
    series: [{
      type: "map",
      map: "chibi",
      itemStyle: {
        normal: {
          areaColor: "#6FA7CE",
          borderColor: "#111",
        },
        emphasis: {
          areaColor: "#B7DFED",
          label: {
            show: true,
            color: "white",
          },
        },
      },
      roam: true,
      top: 70,
      label: {
        show: true, // 是否显示对应地名
      },
      data: [

      ],
    }],
  };

  // 使用刚指定的配置项和数据显示图表。
  userEc.setOption(option);
  userEc.on('dblclick', function (params) {
    console.log(params);
    echarts.registerMap('chibi', chibiArea, {});
    userEc.setOption(option);
  });
  userEc.getZr().on('dblclick', function (event) {
    console.log(event);
    echarts.registerMap('chibi', chibi, {});
    userEc.setOption(option);
  });
});
</script>
